<template>
  <div class="chart" :id="chartId"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { debounce } from "@/utils/util.js";
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  chartId: {
    type: String,
  },
});
const myChart = ref(null);
const chartInit = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById(props.chartId));
  // 配置项
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.chartData.xData,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: props.chartData.yData,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.value.setOption(option);
};

// Lifecycle hook
onMounted(() => {
  chartInit();
});
</script>
<style>
.chart {
  width: 100%;
  height: 100%;
}
</style>
